<template>
  <div class="login">
    <div class="box">
      <p class="title">用户登录<span>User login</span></p>
      <div class="elinput">
        <img src="../assets/img/login/name.png"
             class="icon" />
        <input class="inp"
               type="text"
               placeholder="用户名"
               v-model="name"
               maxlength="30" />
      </div>
      <div class="elinput">
        <img src="../assets/img/login/pas.png"
             class="icon" />
        <input class="inp"
               type="password"
               placeholder="密码"
               v-model="password"
               @keyup.enter="loginSubmit" />
      </div>
      <!-- <div class="el">
        <span @click="goForgetpasw">忘记密码？</span>
        <p>您还没有账号，<span @click="goRegister">马上去注册</span></p>
      </div> -->
      <div class="btn"
           @click="loginSubmit">登录</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data () {
    return {
      name: "",
      password: "",
    };
  },
  methods: {
    goRegister () {
      this.$router.push("/register");
    },
    goForgetpasw () {
      this.$router.push("/forgetpasw");
    },
    loginSubmit () {
      if (this.name == "" || this.password == "") {
        this.$message({
          message: "请输入您的用户名及密码",
          type: "warning",
        });
      } else {
        this.$postRequest('/login', {
          username: this.name,
          password: this.password
        }).then((res) => {
          if (res.code == 200) {
            sessionStorage.setItem("token", res.token);
            sessionStorage.setItem("userType", res.userType || '');
            sessionStorage.setItem("shopId", res.shopId || '');
            this.$router.push('/')
          }
        })
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@import url(../assets/css/login.css);
.btn {
  margin: 80px auto 0 auto;
}
</style>